<template>
    <el-row class=" h-100  leftnav"  :class='{"w200":!isCollapse,"tac":!isMobile}'>
      <!-- {{isCollapse}} -->
        <el-menu
          :default-active="abs"
          active-text-color="#13A1FF"
          text-color='#888'
           unique-opened="unique-opened" 
          :class="{'mobileShadow':isMobile == true}"
          :collapse="isCollapse"
          :router='true'
          >
          <template v-for='item in  routers'> <!--  routers  navdata -->
            <!-- 有下标的导航 item.url是虚拟的，为了不让侧边栏全部都打开-->

            <el-submenu :index="item.url" v-if='item.children' >
                  <template slot="title">
                        <i class='fas' :class="item.icon"  ></i>
                        <span class='ft16'>{{item.title}}</span>
                  </template>
                  <!-- 二级目录 -->
                  <template v-for='nav in item.children'>
                        <!-- <router-link :to="nav.url" :key="nav.name"> -->
                            <el-menu-item :index='nav.url' align='left'>
                              <!-- 再加一层template，为了让a标签包裹更大的范围 -->
                                  <template slot='title'> 
                                    <i  :class="nav.icon" class=' ml40 fas fa-sm' ></i>
                                    <span>{{nav.title}}</span>
                                  </template>
                            </el-menu-item>
                        <!-- </router-link> -->
                  </template>
            </el-submenu> 
            <!-- 无下标的导航 -->
            <!-- <router-link :to="item.url"  v-else> --> <!-- router-link加在外面，为了让a标签扩大范围 -->
                  <el-menu-item :index="item.url"  v-else>
                        <!-- <template slot="title"> -->
                                  <i class='fas' :class="item.icon"  ></i>
                                  <span>{{item.title}}</span>
                            
                        <!-- </template> -->
                  </el-menu-item>
            <!-- </router-link> -->

          </template>
        </el-menu>
        
    </el-row>
  
</template>

<script>

import { mapGetters } from 'vuex'
export default {
  name: 'leftNav',
  props:{
    routers:{
      type:Array,
      default:[]
    },
    isMobile:{
        type:Boolean,
        default:false
    }

  },
  
  data () {
    return {
      // navdata:[
      //   {title:'工作台',icon:'icon-homework',url:'/homework'},
      //   {title:'企业',  icon:'icon-company',url:'/company'},
      //   {title:'业务',  icon:'icon-project',url:'/1',
      //                           children:[
      //                               {title:'项目',icon:'icon-item',url:'/project'},
      //                               {title:'产品',icon:'icon-product',url:'/product'},
      //                               {title:'标的',icon:'icon-object',url:'/object'},
      //                               {title:'合同',icon:'icon-contract',url:'/contract'},
      //                               {title:'清算',icon:'icon-clearing',url:'/clearing'},
      //                               {title:'项目合同',icon:'icon-pro_contract',url:'/pro_contract'}
      //                           ]
      //   },
      //   {title:'审批',  icon:'icon-examine',url:'/examine'},
      //   {title:'用户',  icon:'icon-user',url:'/userlist'},
      //   {title:'日志',  icon:'icon-document',url:'/2',
      //                           children:[
      //                               {title:'操作日志',icon:'icon-op_journal',url:'/op_journal'},
      //                               {title:'登录日志',icon:'icon-login_journal',url:'/login_journal'}
      //                           ]
      //   },
      //   {title:'设置',  icon:'icon-setting',url:'/3',
      //                           children:[
      //                               {title:'角色',icon:'icon-settings_char',url:'/settings_char'},
      //                               {title:'标签',icon:'icon-settings_label',url:'/settings_label'},
      //                               {title:'兑付',icon:'icon-settings_duifu',url:'/settings_duifu'}
      //                           ]
      //   },
      // ],
      navdata:[
        {title:'工作台',icon:'fa-home',url:'/homework'},
        {title:'企业',  icon:'fa-store-alt',url:'/company'},
        {title:'业务',  icon:'fa-stream',url:'/1',
                                children:[
                                    {title:'项目',icon:'fa-briefcase',url:'/project'},
                                    {title:'产品',icon:'fa-dice-d6',url:'/product'},
                                    // {title:'标的',icon:'fas fa-project-diagram',url:'/object'},
                                    {title:'合同',icon:'fa-paperclip',url:'/contract'},
                                    // {title:'清算',icon:'fas fa-coins',url:'/clearing'},
                                    {title:'项目合同',icon:'fa-paste',url:'/pro_contract'}
                                ]
        },
        {title:'审批',  icon:'fa-stamp',url:'/examine'},
        {title:'用户',  icon:'fa-user far',url:'/userlist'},
        {title:'日志',  icon:'fa-copy far',url:'/2',
                                children:[
                                    {title:'操作日志',icon:'fa-edit',url:'/op_journal'},
                                    {title:'登录日志',icon:'fa-sign-in-alt',url:'/login_journal'}
                                ]
        },
        {title:'设置',  icon:'fa-cog',url:'/3',
                                children:[
                                    {title:'角色',icon:'fa-user-tag',url:'/settings_char'},
                                    {title:'菜单权限',icon:'fa-key',url:'/menuSettig'}, 
                                    {title:'标签',icon:'fa-tags',url:'/settings_label'},
                                    {title:'兑付',icon:'fa-file-invoice-dollar',url:'/settings_duifu'}
                                ]
        },
      ],
      abs:'',
      isCollapse:false,
      
    }
  },
  created(){
    let path = this.$route.path
    this.currentPath(path)
    
  },
  methods:{
      //解决二级目录刷新 消失问题
      currentPath(path){
        // console.log(path.split('/'))  ['','examine']
          let arr = path.split('/')
           if(arr.length == 3){
              this.abs = '/' + arr[1]
          }
          else{
            this.abs = path
          }
          // console.log(this.abs)
      },
  },
  mounted(){
      this.$nextTick(function () {
          window.onresize = () => {
            // console.log(document.body.clientWidth)
            if(document.body.clientWidth<992){
              
              this.isCollapse = true
            }
            if(document.body.clientWidth>=992){
              this.isCollapse = false
            }
            
          };
        })

    },
  watch:{
    //监听路由变化，因为我的消息可以从上导航进
    '$route' (to, from) {
      let path = to.path
      this.currentPath(path)
     
   },
   computed:{
      // ...mapGetters(['isMobile','messageNum'])
    },
  }

}
</script>


<style scoped>
.tac{border-right:1px solid #ddd;float: left;}/*float 兼容ie9*/
.el-menu{border-right:0 none;}
.el-menu-item{font-size: 16px;}

.mobileShadow{box-shadow: 0 0 7px rgba(185, 176, 173, 0.4)}
.icon{width: 16px;height: 16px;padding-right: 5px;}

</style>
